<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建一个简单的动画</title>
		<style type="text/css">
			#d1{
				width:200px;
				height:200px;
				background-color:red ;
				position: relative;
				animation: ff 5s;
			}
			@keyframes ff{
				0%{background-color: #FF0000;left:0px; top:0px;}
				25%{background-color: darkcyan;left:200px; top:0px;}
				50%{background-color: aqua;left:200px; top:200px; transform: rotate(40deg);}
				75%{background-color:green ;left:0px; top:200px;}
				100%{background-color: #FF0000;left:0px; top:0px;}
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>
